<template>
    <div>
        <div class="inputs">
            <span class="iconfont icon-fangdajing"></span>
        <input type="text" class="input" v-model="inputval">
        <button @click="fun()">取消</button>
        </div>
        <div class="footer">
            <div class="footer01"><span class="find">搜索发现</span><span class="huan"><span @click="fun1()">换一换</span><span class="iconfont icon-huanyihuan
 
all"></span></span></div>
<div class="footer02">
    <span v-for="(v,i) in datas" :key="i">{{v.searchs}}</span>
    
</div>
        </div>
        <div class="bottom">
            <img :src="inputs.imgs" alt="">
               <div> {{inputs.classify}}</div>
                <div>
                     {{inputs.price}} 
                </div>
           
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            inputval:"",
            inputs:""
        }
    },
    methods:{
        fun(){
            this.$router.go(-1)
        },
    },
    computed:{
        datas(){
            console.log("this.$store.state.Input.arr",this.$store.state);
            return this.$store.state.Input.arr
        }
    },
    created(){
       
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
     this.$store.dispatch("getapithree", { url: "/Input" });
     console.log(this.$store.state.Purchase.arr1[4].classify);
    },
    watch:{
        inputval(newval){
            console.log(newval);
            if(newval == this.$store.state.Purchase.arr1[4].classify){
                this.inputs = this.$store.state.Purchase.arr1[4]
            }else{
                this.inputs = ""
            }
        }
    }
}
</script>

<style scoped>
.bottom{
    margin: auto;
    width: 70%;

}
.footer{
    width: 90%;
    height: 3rem;
    margin: auto;
    margin-top: .4rem;
}
.footer01{
    display: flex;
    justify-content: space-between;
}
.huan{
    display: flex;
    color: rgb(167, 165, 165);
}
.find{
    font-weight: bolder;
}
.icon-huanyihuan
{
    font-size: .20rem;
}
.icon-fangdajing{
    font-size: .20rem;
    position: absolute;
    top: 0.05rem;
    left: 0.07rem;
}
.inputs{
    position: relative;
    width: 90%;
    margin: auto;
    margin-top: .2rem;
}
.input{
    width: 80%;
    padding-left: .3rem;
    height: .3rem;
    background: rgb(248, 248, 248);
    border: none;
}
button{
    font-size: .16rem;
    height: .28rem;
    border:none;
    background: white;
    margin-left: .05rem;
}
.footer02{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: .1rem;
}
.footer02 span{
    width: auto;
    height: .3rem;
    padding: .05rem;
    background: rgb(248, 248, 248);
    margin-top: .06rem;
    margin-right: .06rem;
    text-align: center;
    line-height: .3rem;
    color: rgba(24, 23, 23, 0.877);
}
</style>